<template>
	<view>

		<u-navbar :is-back="true" :custom-back="BackM" title="调拨" back-text="">
			<view class="slot-right" style="width: 100%; display: flex; justify-content: flex-end">
				<view @click="allolt" style="padding: 0rem 0.5rem; display: flex; align-items: center">
					<view style=" font-size: 0.75rem; font-family: PingFang SC; font-weight: 300; color: #02af74;">调拨记录</view>
				</view>
			</view>
		</u-navbar>
		<view class="inputS">
			<u-form :model="form" ref="uForm">
				<u-form-item class="item-height" prop="code" :disabled='true' label-width="auto" label="调拨对象:">
					<view slot="right">
						<view @click="selectShowM" style="display: flex;align-items: center;">
							<image  style="width: 0.4rem;padding: 0.5rem;height: 0.8rem;" src="../../style/image/cargo/back.png"
							 alt="">
						</view>
					</view>
					<u-input v-model="form.code" :disabled='true' placeholder="点击右箭头选择调拨对象" />
				</u-form-item>

				<u-form-item class="item-height" prop="note" label-width="auto" label="调拨备注:">
					<u-input v-model="form.note" type="textarea" placeholder="" />
				</u-form-item>
			</u-form>
		</view>
		<view style="padding: 0.7rem;">
			<view style="padding: 0.3rem; text-align: left">设备SN：</view>
			<view v-for="(item, index) in equiplist">
				<view style="padding: 0.3rem; text-align: left">{{item}}</view>
			</view>
		</view>

		<u-select mode="mutil-column-auto" @confirm="confirmM" value-name='id' label-name='name' child-name='level2' v-model="selectShow"
		 :list="selectList"></u-select>

		<view class="footP">
			<view @click="nextM" style="padding: 0.7rem; display: flex; align-items: center">
				<view style="color: white; margin-left: 0.2rem">确认调拨</view>
			</view>
		</view>

	</view>
</template>

<script lang='ts'>
	import {
		Component,
		Prop,
		Vue,
		Watch,
		Emit
	} from "vue-property-decorator";

	import {
		findUserBox,
		terminalAllot
	} from "../../utils/uniApi";

	import {
		AppModule
	} from "../../store/modules/app";

	@Component({
		//   @Component  是一个装修器   不可以在下面写语句
		name: "test",
	})
	export default class extends Vue {
		@Prop({
			type: String, // 父组件传递给子组件的数据类型
			required: false, // 是否必填
			default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
		})
		msg!: string;

		public form = {
			code: "", //调拨对象
			note: "", //调拨备注
		};
		public codeId = '' //调拨对象id
		public equiplist: any = []; //设备sn码集合
		public selectList: any = []; //行业选择项
		public selectShow = false;


		onReady() {

		}
		created() {
			// this.$refs.uForm.setRules(this.rules);
		}
		onLoad(value: any) {
			if (value.DiaoBo) {
				var dic = JSON.parse(decodeURIComponent(value.DiaoBo))
				var textlist = dic.pedestal.concat(dic.bank)
				textlist.filter((item: any, index: any) => {
					this.equiplist.push(item.sn)
				})
			}
		}

		mounted() {
			this.getDataObject()
		}
		getDataObject(){
			uni.showLoading({
				title: "加载中",
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
			};
			findUserBox(params).then((res: any) => {
				uni.hideLoading();
				if (res.data.code == 200) {
					res.data.data.filter((item: any, index: any) => {
						var obj: object = {
							id: item.id,
							name: item.nickName + '-' + item.phone
						};
						this.selectList.push(obj);
					})
				}
			});
		}
		allolt() {
			uni.navigateTo({
				url: "./transfersRecords",
			});
		}
		BackM() {
			uni.navigateBack({
				delta: 1,
			});
		}

		//行业选择确认按钮
		confirmM(data: any) {
			(this.form as any).code = data[0].label;
			this.codeId = data[0].value;
		}
		//行业选择弹窗
		selectShowM() {
			this.selectShow = !this.selectShow;
			if(this.selectList.length<=0){
				this.getDataObject()
			}
		}
		
		tipNote(value:any){
			uni.showToast({
				title: value,
				icon: 'none',
				duration: 1000
			});
		}


		nextM() {
			if(this.codeId == ''){
				this.tipNote('请选择调拨对象')
				return
			}
			if(this.form.note == ''){
				this.tipNote('请填写调拨备注')
				return
			}
			uni.showLoading({
				title: "加载中",
			});
			let params = {
				userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
				recipientUserId: this.codeId, //划拨设备接收人userID
				remark: this.form.note, //
				sns: JSON.stringify(this.equiplist), //设备号集合（json字符串格式）
			};
			terminalAllot(params).then((res: any) => {
				uni.hideLoading();
				// console.log(res,"返回结果")
				if (res.data.code == 200) {
					uni.showToast({
						title: "调拨成功",
						icon: "none",
						duration: 1000,
					});
					setTimeout(() => {
						uni.switchTab({
							url: "./index",
						});
					}, 1000)
				} else {
					uni.showToast({
						title: "调拨失败",
						icon: "none",
						duration: 1000,
					});
				}
			})
		}

	}
</script>

<style lang="scss" scoped>
	/deep/.uni-input-input {
		display: block;
		height: 100%;
		background: none;
		color: inherit;
		opacity: 1;
		-webkit-text-fill-color: currentcolor;
		font: inherit;
		line-height: inherit;
		letter-spacing: inherit;
		text-align: inherit;
		text-indent: inherit;
		text-transform: inherit;
		text-shadow: inherit;
		//  color: red;
		padding-left: 1rem;
	}

	.item-height {
		padding: 0.1rem 1rem
	}

	.footP {
		position: absolute;
		bottom: 0;
		background-color: #02af74;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
